Viewing Reports in HTML5 Viewer
The following steps describe how to view reports in HTML5 Viewer.
- Create a new Visual Studio Web Application project.
- Copy and place GrapeCity.ActiveReports.Viewer.Html.js, GrapeCity.ActiveReports.Viewer.Html.min.js and GrapeCity.ActiveReports.Viewer.Html.css files at a suitable location near the target HTML page.
Note: In ActiveReports, these files are located in the C:\Program Files\GrapeCity\ActiveReports 9\Deployment\Html - In the target HTML page, add the references to the GrapeCity.ActiveReports.Viewer.Html.css, GrapeCity.ActiveReports.Viewer.Html.js and its following dependencies:
- jQuery 1.9.0 or higher
- Bootstrap 3.0
- Knockout.js 2.3.0 or higher
Note: You can obtain the dependencies like jQuery from Content Delivery Network (CDN) or copy them locally. Paste inside the <head></head> tags Copy Code<link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" /> <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"></script> - Add the reference to the bootstrap.min.css in the target HTML page.
Paste inside the <head></head> tags Copy Code<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
- In the target HTML page, add the DIV element that will contain the HTML5 Viewer.
Paste inside the <body></body> tags Copy Code<div id="viewer" style="width:800px;height:600px;"></div>
- From the Project menu, select Add New Item.
- Open the licenses.licx file, and add the following references to it.
Paste inside the licenses.licx file Copy CodeGrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v9, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v9, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v9, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v9, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff - In the Add New Item dialog that appears, select ActiveReports 9 Web Service and click Add. The ActiveReports9 Web Service is required for the proper functioning of the HTML5 Viewer.
- Add an ActiveReport to the Visual Studio project. See Adding an ActiveReport to a Project for information on adding different report layouts.
-
Add the following code to view your report in the HTML5 Viewer. The code might vary depending on the technology that you use to develop the HTML5 Viewer component.
Paste inside the <script></script> tags Copy Code$(function () { var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewer', report: { id: "PageReport.rdlx" }, reportService: { url: '/ActiveReports.ReportService.asmx' }, uiType: 'desktop' }); }); - Press F5 to run the project.
Viewing reports from different domains using CORS
Cross-Origin Resource Sharing is a technology for the web that provides async web operations to directly access reports from different domains. CORS works by adding a special header to responses from a server to the client. If a response contains the Access-Control-Allow-Origin header, then you can directly access the reports from another domain. If you get error 404 or 500 on the report preview, please make sure that your browser supports CORS.
The following steps describe how to access reports from different domain using CORS.
- Add Global Application Class file (Global.asax) in your application on the service side.
- Open the Global.asax.cs file, and add the following code to access reports using cross websites.
Paste inside the Global.asax.cs Copy Codeprotected void Application_BeginRequest(object sender, EventArgs e) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); HttpContext.Current.Response.End(); }Paste inside the Global.asax.vb Copy CodeSub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs) HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*") If HttpContext.Current.Request.HttpMethod = "OPTIONS" Then HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS") HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept") HttpContext.Current.Response.End() End If End Sub
Note: In case of Internet Explorer 9, you need to add $.support.cors = true;code on the client side while initializing the HTML5 Viewer to access reports from a different domain.
See Also